<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
  <link href="//gmpg.org/xfn/11" rel="profile">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="Hugo 0.68.3" />

  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>websocket解决什么问题？如何使用？ &middot; 我的博客</title>

  
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/print.css" media="print">
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/poole.css">
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/syntax.css">
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/hyde.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|PT+Sans:400,400i,700">


  
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144-precomposed.png">
  <link rel="shortcut icon" href="/favicon.png">

  
  
</head>

  <body class="theme-base-0b ">
  <aside class="sidebar">
  <div class="container sidebar-sticky">
    <div class="sidebar-about">
      <a href="/my_technology_blog/"><h1>我的博客</h1></a>
      <p class="lead">
       杨博的博客 
      </p>
    </div>

    <nav>
      <ul class="sidebar-nav">
        <li><a href="/my_technology_blog/">Home</a> </li>
        
      </ul>
    </nav>

    <p>&copy; 2021. All rights reserved. </p>
  </div>
</aside>

    <main class="content container">
    <div class="post">
  <h1>websocket解决什么问题？如何使用？</h1>
  <time datetime=2020-06-02T15:50:54&#43;0800 class="post-date">Tue, Jun 2, 2020</time>
  <p><em><strong>WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输</strong></em></p>
<p><strong>使用</strong></p>
<p><em><strong>django端</strong></em></p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-python" data-lang="python"><span style="color:#75715e"># 导入dwebsocket的库</span>
<span style="color:#f92672">from</span> dwebsocket.decorators <span style="color:#f92672">import</span> accept_websocket


<span style="color:#a6e22e">@accept_websocket</span>
<span style="color:#66d9ef">def</span> <span style="color:#a6e22e">websocket_link</span>(request):
    <span style="color:#75715e"># 定义一个独立的用户id</span>
    userid <span style="color:#f92672">=</span> str(uuid<span style="color:#f92672">.</span>uuid1())

    <span style="color:#75715e"># 循环监听</span>
    <span style="color:#66d9ef">while</span> True:
        <span style="color:#75715e"># 获取连接信息</span>
        message <span style="color:#f92672">=</span> request<span style="color:#f92672">.</span>websocket<span style="color:#f92672">.</span>wait()
        <span style="color:#75715e"># 如果没有链接信息，断开链接</span>
        <span style="color:#66d9ef">if</span> <span style="color:#f92672">not</span> message:
            <span style="color:#66d9ef">break</span>
        <span style="color:#66d9ef">else</span>:
            <span style="color:#66d9ef">print</span>(<span style="color:#e6db74">&#39;连接成功&#39;</span> <span style="color:#f92672">+</span> str(message, encoding<span style="color:#f92672">=</span><span style="color:#e6db74">&#34;utf-8&#34;</span>))
            <span style="color:#75715e"># 针对指定用户，建立链接</span>
            clients[userid] <span style="color:#f92672">=</span> request<span style="color:#f92672">.</span>websocket

            
            
<span style="color:#75715e"># 定义通过websocket发送消息</span>
<span style="color:#66d9ef">def</span> <span style="color:#a6e22e">websocket_send</span>(request):
    <span style="color:#75715e"># 获取消息内容</span>
    msg <span style="color:#f92672">=</span> request<span style="color:#f92672">.</span>GET<span style="color:#f92672">.</span>get(<span style="color:#e6db74">&#34;msg&#34;</span>)

    <span style="color:#75715e"># 遍历客户端列表，推送消息</span>
    <span style="color:#66d9ef">for</span> client <span style="color:#f92672">in</span> clients:
        <span style="color:#75715e"># 推送</span>
        clients[client]<span style="color:#f92672">.</span>send(msg<span style="color:#f92672">.</span>encode(<span style="color:#e6db74">&#39;utf-8&#39;</span>))

    <span style="color:#66d9ef">return</span> HttpResponse({<span style="color:#e6db74">&#34;msg&#34;</span>: <span style="color:#e6db74">&#34;推送消息成功&#34;</span>})
</code></pre></div><p><em><strong>vue端</strong></em></p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue">&lt;<span style="color:#f92672">template</span>&gt;
  &lt;<span style="color:#f92672">div</span>&gt;

      &lt;<span style="color:#f92672">mh</span>&gt;&lt;/<span style="color:#f92672">mh</span>&gt;

    &lt;<span style="color:#f92672">main</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;&#34;</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;main-collapse&#34;</span>&gt;
      &lt;<span style="color:#f92672">div</span>&gt;
      
      
        <span style="color:#75715e">&lt;!--</span><span style="color:#a6e22e">面包屑导航</span> <span style="color:#a6e22e">通过</span><span style="color:#960050;background-color:#1e0010">：</span><span style="color:#a6e22e">进行传参操作</span><span style="color:#f92672">--&gt;</span>
        &lt;<span style="color:#f92672">bread</span> <span style="color:#f92672">:</span><span style="color:#a6e22e">datas</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#39;this.datas&#39;</span>&gt;&lt;/<span style="color:#f92672">bread</span>&gt;

        &lt;<span style="color:#f92672">br</span> /&gt;&lt;<span style="color:#f92672">br</span> /&gt;

        {{ <span style="color:#a6e22e">msglist</span> }}
        

        
      &lt;/<span style="color:#f92672">div</span>&gt;
    
    &lt;/<span style="color:#f92672">main</span>&gt;

  &lt;/<span style="color:#f92672">div</span>&gt;
&lt;/<span style="color:#f92672">template</span>&gt;

 
&lt;<span style="color:#f92672">script</span>&gt;


<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">mh</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;./mh.vue&#39;</span>
<span style="color:#75715e">//导入面包屑导航组件
</span><span style="color:#75715e"></span><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">bread</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;./bread.vue&#39;</span>

<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
  <span style="color:#a6e22e">data</span> () {
    <span style="color:#66d9ef">return</span> {
      <span style="color:#a6e22e">msg</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;这是一个变量&#34;</span>,
      <span style="color:#75715e">//面包屑变量
</span><span style="color:#75715e"></span>      <span style="color:#a6e22e">datas</span><span style="color:#f92672">:</span>[{<span style="color:#a6e22e">title</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#39;首页&#39;</span>,<span style="color:#a6e22e">route</span><span style="color:#f92672">:</span>{<span style="color:#a6e22e">name</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#39;index&#39;</span>}},{<span style="color:#a6e22e">title</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#39;客服页面&#39;</span>}],
      <span style="color:#75715e">//数据
</span><span style="color:#75715e"></span>      <span style="color:#a6e22e">datalist</span><span style="color:#f92672">:</span>[],
      <span style="color:#75715e">//聊天列表
</span><span style="color:#75715e"></span>      <span style="color:#a6e22e">msglist</span><span style="color:#f92672">:</span>[]
      
    }
  },
  <span style="color:#a6e22e">components</span><span style="color:#f92672">:</span> {
        <span style="color:#e6db74">&#39;mh&#39;</span><span style="color:#f92672">:</span><span style="color:#a6e22e">mh</span>,
        <span style="color:#75715e">//声明标签
</span><span style="color:#75715e"></span>        <span style="color:#e6db74">&#39;bread&#39;</span><span style="color:#f92672">:</span><span style="color:#a6e22e">bread</span>
  },
  <span style="color:#a6e22e">mounted</span><span style="color:#f92672">:</span><span style="color:#66d9ef">function</span>(){

      <span style="color:#75715e">//建立持久化websocket链接
</span><span style="color:#75715e"></span>

      <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">_this</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">this</span>;
      <span style="color:#75715e">//判断当前浏览器是否支持websocket协议
</span><span style="color:#75715e"></span>      <span style="color:#66d9ef">if</span>(<span style="color:#e6db74">&#34;WebSocket&#34;</span> <span style="color:#66d9ef">in</span> window){

        <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#39;支持&#39;</span>);
        <span style="color:#75715e">//建立链接
</span><span style="color:#75715e"></span>        <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">ws</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">WebSocket</span>(<span style="color:#e6db74">&#34;ws://localhost:8000/websocket_link/&#34;</span>);
        <span style="color:#75715e">//发送链接信息
</span><span style="color:#75715e"></span>        <span style="color:#a6e22e">ws</span>.<span style="color:#a6e22e">onopen</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">function</span>(){
            <span style="color:#75715e">//发送测试信息
</span><span style="color:#75715e"></span>            <span style="color:#a6e22e">ws</span>.<span style="color:#a6e22e">send</span>(<span style="color:#e6db74">&#34;test&#34;</span>);
        };
        <span style="color:#75715e">//监听消息
</span><span style="color:#75715e"></span>        <span style="color:#a6e22e">ws</span>.<span style="color:#a6e22e">onmessage</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">function</span>(<span style="color:#a6e22e">evt</span>){

          <span style="color:#75715e">//获取监听到的消息
</span><span style="color:#75715e"></span>          <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">mymsg</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">evt</span>.<span style="color:#a6e22e">data</span>;
          <span style="color:#75715e">//alert(mymsg);
</span><span style="color:#75715e"></span>          <span style="color:#75715e">//消息赋值
</span><span style="color:#75715e"></span>          <span style="color:#a6e22e">_this</span>.<span style="color:#a6e22e">msglist</span>.<span style="color:#a6e22e">push</span>(<span style="color:#a6e22e">mymsg</span>);
        };
        <span style="color:#75715e">//关闭链接
</span><span style="color:#75715e"></span>        <span style="color:#a6e22e">ws</span>.<span style="color:#a6e22e">onclose</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">function</span>(){
          <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#34;websocket链接已经关闭&#34;</span>);
        }

      }<span style="color:#66d9ef">else</span>{
        <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#34;不支持&#34;</span>);
      }

    

    

},
  <span style="color:#a6e22e">methods</span><span style="color:#f92672">:</span>{

    

    
  }
}


&lt;/<span style="color:#f92672">script</span>&gt;
 
&lt;<span style="color:#f92672">style</span>&gt;



&lt;/<span style="color:#f92672">style</span>&gt;
</code></pre></div>
</div>


    </main>

    
  </body>
</html>
